<!--
 * @Description: 订单管理
 * @Author: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @Date: 2021-07-03 11:41:05
 * @LastEditTime: 2023-05-10 18:45:19
 * @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY
-->

<template>
    <div class="lb-shop-order">
        <top-nav />
        <div class="page-main">
            <el-row class="page-top-operate">
                <lb-button size="medium" type="primary" icon="el-icon-plus" @click="toShowDialog"
                    v-hasPermi="`${$route.name}-add`">{{ $t('menu.AreaStreetsAdd') }}</lb-button>
            </el-row>
            <div class="pb-lg">
                共{{ residentlist.total }}条数据
            </div>
            <el-table :data="residentlist.data" :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
                style="width: 100%">
                <el-table-column prop="id" label="ID" width="80" fixed></el-table-column>
                <el-table-column prop="name" min-width="300" label="街道名称"></el-table-column>
                <el-table-column prop="area" min-width="300" label="所属省市区"></el-table-column>
                <el-table-column label="操作" min-width="160">
                    <template v-slot="scope">
                        <div class="table-operate">
                            <lb-button size="mini" plain type="primary" @click="toShowDialog(scope.row)"
                                v-hasPermi="`${$route.name}-edit`">{{ $t('action.edit') }}</lb-button>
                            <lb-button size="mini" plain type="danger" @click="confirmDel(scope.row.id, -1)"
                                v-hasPermi="`${$route.name}-delete`">{{ $t('action.delete') }}</lb-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page" :page-sizes="[5, 10, 20]" :page-size="100"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog :title="$t(subForm.id ? 'menu.AreaStreetsEdit' : 'menu.AreaStreetsAdd')" :visible.sync="showDialog"
            width="500px" center>
            <el-form class="dialog-form" :model="subForm" ref="subForm" label-width="100px">
                <el-form-item label="省市区" prop="title">
                    <el-cascader style="width: 350px;" v-model="street" :options="options" @change="handleChange"
                        :props="{ value: 'label', label: 'label' }"></el-cascader>
                </el-form-item>
                <el-form-item label="街道名" prop="title">
                    <el-input v-model="subForm.name" placeholder="请输入街道名"></el-input>
                </el-form-item>
            </el-form>
            <span class="dialog-footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="submitFormInfo" v-preventReClick>确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    mapState
} from 'vuex'
import cityData from '@/utils/areadata.js'
export default {
    data() {
        return {
            options: [],
            subForm: {
                id: "",
                area: "",
                name: ""
            },
            street: "",
            total: {
                list: 0,
                transfer: 0
            },
            residentlist: [], //小区列表
            showDialog: false,
            page:1,
            paginate:5,
            limit:0,
            total:0,
        }
    },

    computed: {
        ...mapState({
            routesItem: state => state.routes
        })
    },
    created() {
        this.options = cityData;
        // this.getarea()
    },
    mounted() {
        this.getList(1)

    },
    methods: {
        handleChange(e) {
            let joinedString = '';
            e.forEach(element => {
                joinedString += element + '/';
            });
            let lastIndex = joinedString.lastIndexOf('/');
            let result = joinedString.substring(0, lastIndex);
            this.subForm.area = result;

            console.log(this.street, '选择');
        },
        async getarea(id) {
            this.$api.channel.areaInfo({
                id
            }).then((res) => {
                this.options = res.data
                console.log(this.options, '获取省市区');
            })
        },
        async getList(page) {
            let {
                code,
                data
            } = await this.$api.channel.streetLst({
                area:'',
                page: this.page,
                paginate: this.paginate
            })
            console.log('获取街道列表', data);
            if (code !== 200) return
            this.total = data.total
            this.residentlist = data
            
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.paginate = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.page = val
            this.getList()
        },

        toShowDialog(item) {
            if (item) {
                this.subForm = item
                this.street = item.area.split('/');
            } else {
                this.subForm.id = ''
            }
            this.showDialog = true
        },
        async submitFormInfo() {
            let subForm = JSON.parse(JSON.stringify(this.subForm))
            console.log(subForm);
            let methodModel = subForm.id ? 'streetUpdate' : 'streetAdd'
            let {
                code
            } = await this.$api.channel[methodModel](subForm)
            if (code !== 200) return
            this.$message.success(this.$t('tips.successSub'))
            this.showDialog = false
            this.getList(1)
        },
        confirmDel(id, status) {

            this.$api.channel.streetDel({
                id
            }).then(() => {
                this.$message.success('删除成功')
                this.getList(1)
            })
            return false
        },


    },

}
</script>

<style lang="scss" scoped>
.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.lb-shop-order {
    .page-main {
        width: 100%;

        .el-select,
        .el-input-number,
        .el-input {
            width: 200px;
        }

        .bell-tag {
            top: 10px;
            left: 0;
            width: 50px;
            height: 20px;
            background: #f12c20;
            border-radius: 5px 0 10px 0;

            .text {
                scale: 0.8;
            }
        }

        .dialog-form {

            .el-select,
            .el-input-number,
            .el-input {
                width: 300px;
            }
        }
    }
}

.none {
    display: none;
}
.el-pagination{
    display: flex;
    justify-content: flex-end;
}
</style>
<style media="print">
.none {
    display: block;
}
</style>